<template>
  <div class="yd">
    <div class="six">
        <!-- 面包屑导航 -->
        <el-breadcrumb
        style=" margin-top: 10px; margin-left: 10px"
          separator-class="el-icon-arrow-right">
          <el-breadcrumb-item style="margin-top:8px" :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item style="margin-top:8px" :to="{ path: 'List' }">景区列表</el-breadcrumb-item>
          <el-breadcrumb-item style="margin-top:8px" :to="{ path: 'Reserve' }">景区详情</el-breadcrumb-item>
          <el-breadcrumb-item style="margin-top:8px">填写订单</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    <div class="riqi">
      <!-- 日期模块 -->
      <div class="riqi1">
        <div class="riqi3">
          游玩日期&nbsp;
          <div class="block riqi2">
            <el-date-picker
              v-model="value2"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="riqi4">
          购买数量&nbsp;
          <span>该类型当前无库存</span>
        </div>
      </div>
      <!-- 预定通知 -->
      <div class="ydt">预定通知</div>
      <!-- 联系人信息 -->
      <div class="lian">
        <div class="xinxi">联系人信息</div>
        <div class="lx">
          联系人&nbsp;<el-input
            class="kuang"
            placeholder="请输入联系人"
            v-model="input"
            clearable
          >
          </el-input>
        </div>
        <div class="lx">
          手机号&nbsp;<el-input
            class="kuang"
            placeholder="请输入手机号"
            v-model="input"
            clearable
          >
          </el-input>
        </div>
        <div class="lx">
          身份证&nbsp;<el-input
            class="kuang"
            placeholder="请输入身份证"
            v-model="input"
            clearable
          >
          </el-input>
        </div>
      </div>
      <!-- 优惠券 -->
      <div class="youhui">
        <div class="youhui1">优惠券</div>
        <div class="youhui2">
          优惠券信息 &nbsp;<button>选择可用优惠券</button>
        </div>
      </div>
      <!-- 提交订单 -->
      <div class="tijiao">
        <button> <router-link style="color:white" to="/Pay">提交订单</router-link></button>
      </div>
    </div>
  </div>
</template>
<style scoped>
.six {
  height: 30px;
  background-color: rgb(231, 231, 231);
}
.kuang {
  width: 300px;
}
.tijiao button {
  color: #fff;
  background-color: rgb(25, 186, 235);
  border-radius: 5px;
  padding: 5px 15px;
  float: right;
  margin: 5px 10px;
}
.tijiao {
  height: 50px;
  width: 1000px;
  background-color: rgb(177, 167, 167);
}
.youhui2 > button {
  background-color: #fff;
  border-radius: 5px;
  padding: 5px 60px 5px 40px;
}
.youhui2 {
  margin-left: 25px;
}
.youhui1 {
  margin: 20px 0px 25px 20px;
}
.youhui {
  width: 774px;
  height: 114px;
  border: 1px solid rgb(226, 218, 218);
  border-radius: 5px;
  display: inline-block;
  margin: 30px 0;
}
.lian input {
  width: 300px;
  height: 32px;
  border: 1px solid rgb(226, 218, 218);
  border-radius: 5px;
}
.lx {
  margin: 20px;
}
.xinxi {
  margin: 10px 0 50px 20px;
}
.lian {
  width: 774px;
  height: 256px;
  border: 1px solid rgb(226, 218, 218);
  border-radius: 5px;
  display: inline-block;
  margin-top: 30px;
}
.ydt {
  width: 300px;
  display: inline-block;
  float: right;
  margin-right: 90px;
}
.yd {
  width: 1200px;
  margin: auto;
}
.riqi4 span {
  color: red;
}
.riqi4 {
  margin: 30px 20px;
}
.riqi3 {
  margin: 10px 20px;
}
.riqi2 {
  display: inline-block;
}
.riqi1 {
  width: 774px;
  height: 136px;
  border: 1px solid rgb(226, 218, 218);
  border-radius: 5px;
  display: inline-block;
}
.riqi {
  width: 1200px;
  height: 650px;
  margin: 20px auto;
}
</style>
<script>
export default {
  data() {
    return {
      input: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
};
</script>
